<template>
  <div>
    <!--头部-->
    <AppLayout>
    <!--幻灯片-->
        <div class="block">
          <el-carousel height="500px">
            <el-carousel-item v-for="item in imgs" :key="item">
              <img :src='item'></img>
            </el-carousel-item>
          </el-carousel>
        </div>
<!--    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">-->
<!--      <ol class="carousel-indicators">-->
<!--        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>-->
<!--        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>-->
<!--&lt;!&ndash;        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>&ndash;&gt;-->
<!--      </ol>-->
<!--      <div class="carousel-inner">-->
<!--        <div class="carousel-item active">-->
<!--          <img class="d-block w-100" src="../static/images/banner-1.jpg" alt="First slide">-->
<!--        </div>-->
<!--        <div class="carousel-item">-->
<!--          <img class="d-block w-100" src="../static/images/banner-2.jpg" alt="First slide">-->
<!--        </div>-->
<!--      </div>-->
<!--      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">-->
<!--        <span class="carousel-control-prev-icon" aria-hidden="true"></span>-->
<!--        <span class="sr-only">Previous</span>-->
<!--      </a>-->
<!--      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">-->
<!--        <span class="carousel-control-next-icon" aria-hidden="true"></span>-->
<!--        <span class="sr-only">Next</span>-->
<!--      </a>-->
<!--    </div>-->

    <div class="service">
      <div class="container p50">
        <div class="row">
          <div class="col-md-12 title">
            <h2>我们的服务</h2>
            <div class="line"></div>
          </div>
          <div class="col-md-4 col-sm-6 col-xs-12">
            <div class="ser-item">
              <div class="service-icon">
                <span class="fa fa-heartbeat service-icon-effect"></span>
              </div>
              <h3><a href="#">心脏监测</a></h3>
              <p>XXX的通道有许多变化，但大多数人以某种形式遭受了改变，通过注射幽默</p>
            </div>
          </div>
          <div class="col-md-4 col-sm-6 col-xs-12">
            <div class="ser-item">
              <div class="service-icon">
                <span class="fa fa-stethoscope service-icon-effect"></span>
              </div>
              <h3><a href="#">康复治疗</a></h3>
              <p>XXX的通道有许多变化，但大多数人以某种形式遭受了改变，通过注射幽默</p>
            </div>
          </div>
          <div class="col-md-4 col-sm-6 col-xs-12">
            <div class="ser-item">
              <div class="service-icon">
                <span class="fa fa-h-square service-icon-effect"></span>
              </div>
              <h3><a href="#">医疗保健</a></h3>
              <p>XXX的通道有许多变化，但大多数人以某种形式遭受了改变，通过注射幽默</p>
            </div>
          </div>
          <div class="col-md-4 col-sm-6 col-xs-12">
            <div class="ser-item">
              <div class="service-icon">
                <span class="fa fa-medkit service-icon-effect"></span>
              </div>
              <h3><a href="#">背景调查</a></h3>
              <p>XXX的通道有许多变化，但大多数人以某种形式遭受了改变，通过注射幽默</p>
            </div>
          </div>
          <div class="col-md-4 col-sm-6 col-xs-12">
            <div class="ser-item">
              <div class="service-icon">
                <span class="fa fa-user-md service-icon-effect"></span>
              </div>
              <h3><a href="#">特殊医生</a></h3>
              <p>XXX的通道有许多变化，但大多数人以某种形式遭受了改变，通过注射幽默</p>
            </div>
          </div>
          <div class="col-md-4 col-sm-6 col-xs-12">
            <div class="ser-item">
              <div class="service-icon">
                <span class="fa fa-ambulance service-icon-effect"></span>
              </div>
              <h3><a href="#">24小时服务</a></h3>
              <p>XXX的通道有许多变化，但大多数人以某种形式遭受了改变，通过注射幽默</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--选择我们 -->
    <div class="choose p50">
      <div class="container">
        <div class="row">
          <div class="col-md-12 title">
            <h2>为什么选择我们</h2>
            <div class="line"></div>
          </div>
          <div class="col-md-5 col-sm-12 col-xs-12 p30">
            <img src="../static/images/choose-us-img1.jpg" />
          </div>
          <div class="col-md-7 col-sm-12 col-xs-12 p30 c-show">
            <div class="row">
              <div class="col-md-2 col-sm-2">
                <a href="#" class="media-icon">
                  <span class="fa fa-hospital-o"></span>
                </a>
              </div>
              <div class="col-md-10 col-sm-10 clearfix c-w">
                <h3 class="">先进的医疗设备</h3>
                <p>先进的医疗设备先进的医疗设备先进的医疗设备先进的医疗设备先进的医疗设备先进的医疗设</p>
              </div>
            </div>
            <div class="row">
              <div class="col-md-2 col-sm-2 ">
                <a href="#" class="media-icon">
                  <span class="fa fa-user-md"></span>
                </a>
              </div>
              <div class="col-md-10 col-sm-10 clearfix c-w">
                <h3 class="">专业的医疗团队</h3>
                <p>专业的医疗团队专业的医疗团队专业的医疗团队专业的医疗团队专业的医疗团队专业的医疗团</p>
              </div>
            </div>
            <div class="row">
              <div class="col-md-2 col-sm-2">
                <a href="#" class="media-icon">
                  <span class="fa fa-ambulance"></span>
                </a>
              </div>
              <div class="col-md-10 col-sm-10 clearfix c-w">
                <h3 class="">紧急支援</h3>
                <p>紧急支援紧急支援紧急支援紧急支援紧急支援紧急支援紧急支援紧急支援紧急支援紧急支援紧</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--数据-->
    <div class="counters p50 clearfix">
      <div class="container">
        <div class="row">
          <div class="col-md-3 col-sm-6 col-xs-6">
            <div class="counter-box">
              <div class="counter-no counter">
                200
              </div>
              <div class="counter-label">医疗人员</div>
            </div>
          </div>
          <div class="col-md-3 col-sm-6 col-xs-6">
            <div class="counter-box">
              <div class="counter-no counter">
                300
              </div>
              <div class="counter-label">诊所病房</div>
            </div>
          </div>
          <div class="col-md-3 col-sm-6 col-xs-6">
            <div class="counter-box">
              <div class="counter-no counter">
                350
              </div>
              <div class="counter-label">医疗设备</div>
            </div>
          </div>
          <div class="col-md-3 col-sm-6 col-xs-6">
            <div class="counter-box">
              <div class="counter-no counter">
                700
              </div>
              <div class="counter-label">康复病人</div>
            </div>
          </div>

        </div>
      </div>
    </div>
    <!--新闻资讯-->
    <div class="news p50">
      <div class="container">
        <div class="row">
          <div class="col-md-12 title">
            <h2>新闻资讯</h2>
            <div class="line"></div>
          </div>
          <div class="col-md-4 col-sm-12 clearfix">
            <div class="single-Blog">
              <div class="single-blog-left">
                <ul class="blog-comments-box">
                  <li>五月
                    <h2>02</h2>2017</li>
                  <li><span class="fa fa-eye"></span>1523</li>
                </ul>
              </div>
              <div class="single-blog-right">
                <div class="blog-img">
                  <figure class="blog-figure">
                    <a href="news - show.html"><img src="../static/images/choose-us-img3.jpg" alt="img"></a>
                    <span class="image-effect"></span>
                  </figure>
                </div>
                <div class="blog-author">
                  <p>作者：<span>李博士</span></p>
                </div>
                <div class="blog-content">
                  <h3>医疗牙科部门最新趋势</h3>
                  <p>XXX的通道有许多变化，但大部分人以某种形式遭受改变，注入幽默，或者看起来不太可信的随机词。</p>
                  <div class="more">
                    <a href="news - show.html" data-hover="Read More"><span>阅读更多</span></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-sm-12 clearfix">
            <div class="single-Blog">
              <div class="single-blog-left">
                <ul class="blog-comments-box">
                  <li>五月
                    <h2>02</h2>2017</li>
                  <li><span class="fa fa-eye"></span>1523</li>
                </ul>
              </div>
              <div class="single-blog-right">
                <div class="blog-img">
                  <figure class="blog-figure">
                    <a href="news - show.html"><img src="../static/images/choose-us-img3.jpg" alt="img"></a>
                    <span class="image-effect"></span>
                  </figure>
                </div>
                <div class="blog-author">
                  <p>作者：<span>李博士</span></p>
                </div>
                <div class="blog-content">
                  <h3>医疗牙科部门最新趋势</h3>
                  <p>XXX的通道有许多变化，但大部分人以某种形式遭受改变，注入幽默，或者看起来不太可信的随机词。</p>
                  <div class="more">
                    <a href="news - show.html" data-hover="Read More"><span>阅读更多</span></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-sm-12 ">
            <div class="single-Blog">
              <div class="single-blog-left">
                <ul class="blog-comments-box">
                  <li>五月
                    <h2>02</h2>2017</li>
                  <li><span class="fa fa-eye"></span>1523</li>
                </ul>
              </div>
              <div class="single-blog-right">
                <div class="blog-img">
                  <figure class="blog-figure">
                    <a href="news - show.html"><img src="../static/images/choose-us-img3.jpg" alt="img"></a>
                    <span class="image-effect"></span>
                  </figure>
                </div>
                <div class="blog-author">
                  <p>作者：<span>李博士</span></p>
                </div>
                <div class="blog-content">
                  <h3>医疗牙科部门最新趋势</h3>
                  <p>XXX的通道有许多变化，但大部分人以某种形式遭受改变，注入幽默，或者看起来不太可信的随机词。</p>
                  <div class="more">
                    <a href="news - show.html" data-hover="Read More"><span>阅读更多</span></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--尾部-->
    </AppLayout>
  </div>
</template>


<script>
import "../static/css/reset.css";
import "../static/css/style.css";
import AppLayout from '../Layout1.vue';
import '../static/vendor/animate/animate.css';
import '../static/css/theme.css';
import '../static/css/maicons.css';
import { listMedicalInfo } from "@/api/medicalInfo/medicalInfo";
import 'bootstrap/dist/css/bootstrap.css'
import { getUser } from "@/api/system/user";
import 'font-awesome/css/font-awesome.min.css'
export default {
  name: 'Home',
  components: {
    AppLayout,
  },
  data() {
    return {
      imgs: [require('../static/images/banner-1.jpg'),require('../static/images/banner-2.jpg')]
      //imgs: ['../static/images/banner-1.jpg','../static/images/banner-2.jpg']
    }
  },
}
</script>

<style>
@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
    justify-content: center; /* Flexbox utility class for centering */
    flex-grow: 1;
  }

  .navbar-nav .nav-link {
    //padding-right: .5rem;
    //padding-left: .5rem;
  }

  /* 这是为了确保navbar-brand在大屏幕上也居中显示 */
  .navbar .navbar-collapse {
    justify-content: center;
  }
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>


